<!DOCTYPE html>
<html">

<head>
    <script src="js/jquery-3.4.1.min.js"></script>
    <meta charset="UTF-8">
    <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
          name="viewport">
    <meta content="ie=edge" http-equiv="X-UA-Compatible">
    <script src="js/vue.global.js"></script>
    <!-- <script src="https://unpkg.com/vue-i18n@9"></script> -->
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
    </link>
    <title>EasySpider: NoCode Visual Web Crawler</title>
</head>
<style>
    .img-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: 40px;
    }

    .img-container img {
        /*max-width: 50%;*/
        height: 75px;
        margin-top: 10px;
        margin-bottom: 10px; /* 可根据需要调整图片之间的间距 */
    }
</style>
<body>
<div id="app">

    <div style="padding: 10px; text-align: center;vertical-align: middle;" v-if="init">
        <h5 style="margin-top: 20px">选择语言/Select Language</h5>

        <p><a @click="changeLang('zh')" class="btn btn-outline-primary btn-lg"
              style="margin-top: 15px; width: 300px;height:60px;padding-top:12px;">中文</a></p>

        <p><a @click="changeLang('en')" class="btn btn-outline-primary btn-lg"
              style="margin-top: 15px; width: 300px;height:60px;padding-top:12px;">English</a></p>
        <p style="font-size: 17px">当前版本/Current Version: <b>v0.5.0</b></p>
        <p style="font-size: 17px"><a href="https://github.com/NaiboWang/EasySpider/releases" target="_blank">Github</a>最新版本/Newest Version：<b>{{newest_version}}</b></p>
<!--        <p>如发现新版本更新，可从以下Github仓库下载最新版本使用/If a new version is found, you can download the latest version from the following Github repository:</p>-->
<!--        <p></p>-->
        <div class="img-container">
<!--            <h5>出品方/Producer</h5>-->
            <a href="https://www.zju.edu.cn" alt="浙江大学 Zhejiang University" target="_blank"><img src="img/zju.png"></a>
            <a href="https://www.nus.edu.sg" alt="新加坡国立大学 National University of Singpaore" target="_blank"><img src="img/nuslogo.png"></a>
            <a href="https://www.xidian.edu.cn" alt="西安电子科技大学 Xidian University" target="_blank"><img src="img/xidian.png"></a>
        </div>

    </div>

    <div style="padding: 10px; text-align: center;vertical-align: middle;" v-else>
        <div v-if="lang=='en'">
            <div v-if="step == -1">
                <h4 style="margin-top: 20px">Copyright and Disclaimer</h4>
                <p>Please carefully read the following instructions regarding the use of the software and commercial payments. If you agree, please accept the agreement.</p>
                <textarea class="form-control" style="margin:0 auto;width:90%; color:black; height: 450px; min-height: 200px; background: white" readonly>
This software is intended for educational and communication purposes only. It is strictly prohibited to use the software for any illegal activities or operations, such as crawling government/military websites that are not allowed to be crawled. The user bears all consequences resulting from the use of this software and the author shall not be held responsible or liable in any way. Furthermore, the software is protected by patent rights. If you intend to use it for commercial purposes or profit-making activities, such as using the software for client orders, selling the collected data, please contact Hangzhou Tianqin Intellectual Property Agency Co., Ltd. (http://www.tqip.com/) for patent authorization and payment operations: https://www.patentguru.com/cn/search?q=一种自定义提取流程的服务封装系统
For individual users, EasySpider is a completely free and ad-free open-source software. The development and maintenance of the software rely solely on the author's voluntary efforts. Therefore, you can choose to support the author, allowing them to have more enthusiasm and energy to maintain this software. Alternatively, if you have profited from using this software, you are welcome to support the author through the following methods:

1. PayPal account: naibowang, or scan the QR code provided in the software package.
2. Alipay account: naibowang@foxmail.com, or scan the QR code provided in the software package.
3. WeChat payment: scan the QR code provided in the software package.

</textarea>
                <p><a @click="acceptAgreement" class="btn btn-primary btn-lg"
                      style="margin-top: 30px; width: 300px;height:60px;padding-top:12px;color:white">Agree and Start</a></p>
            </div>
            <div v-if="step == 0">
                <p style="margin-top: 20px">Hint: Click Button below to start.</p>

                <p><a @click="step = 1"
                      class="btn btn-primary btn-lg"
                      style="margin-top: 15px; width: 300px;height:60px;padding-top:12px;color:white">Design/Modify Task</a>
                </p>

                <p><a @click="startInvoke('en')"
                      @click class="btn btn-primary btn-lg"
                      style="margin-top: 15px; width: 300px;height:60px;padding-top:12px;color:white">View/Manage/Invoke
                    Tasks</a></p>
                <p>
                    <a href="https://www.easyspider.cn/index_english.html" target="_blank" style="text-align: center; font-size: 18px">Browse official website to watch tutorials</a>
                </p>
                <div class="img-container">
<!--                    <h5>Producer</h5>-->
                    <a href="https://www.zju.edu.cn" alt="Zhejiang University" target="_blank"><img src="img/zju.png"></a>
                    <a href="https://www.nus.edu.sg" alt="National University of Singapore" target="_blank"><img src="img/nuslogo.png"></a>
                    <a href="https://www.xidian.edu.cn" alt="Xidian University" target="_blank"><img src="img/xidian.png"></a>
                </div>
            </div>
            <div v-else-if="step == 1">
                <h4 style="margin-top: 20px">Please select design mode</h4>
                <p style="margin-top: 20px; text-align: justify; width:310px; margin-left: 18%">
                    Clean Mode: Start with a clean browser with no cookie/user data.</p>
                <p style="text-align: justify; width:310px; margin-left: 18%">
                    Data Mode: Start with a browser that stores user data such as website login information and cookies.</p>
                <p><a @click="startDesign('en')"
                      class="btn btn-primary btn-lg"
                      style="margin-top: 15px; width: 300px;height:60px;padding-top:12px;color:white">Start Clean Mode</a>
                </p>

                <p><a @click="startDesign('en', false, true)"
                      class="btn btn-primary btn-lg"
                      style="margin-top: 15px; width: 300px;height:60px;padding-top:12px;color:white">Clean Mode (Mobile)</a>
                </p>

                <p><a @click="step = 2" @click
                      class="btn btn-primary btn-lg"
                      style="margin-top: 15px; width: 300px;height:60px;padding-top:12px;color:white">Start Data Mode</a>
                </p>

                <a @click="step = 0" class="btn btn-outline-primary btn-lg"style="margin-top: 10px; width: 302px;height:45px;padding-top:5px">Go to Home Page</a>

            </div>
            <div v-else-if="step == 2">
                <h4 style="margin-top: 20px">Specify user data folder</h4>
                <div style="margin: 0 auto; width:90%">
                    <p style="margin-top: 20px; text-align: justify">
                        Please specify the directory of user data below. Once set, the browser will load cookies and other contents such as user login information from this directory. The browser will load data from this directory every time it is designed and executed, as long as the directory remains the same. </p>
                    <p style="text-align: justify">For example, if the <b>./user_data</b> folder is set and you log in at <b>ebay.com</b> during the design process, then the previous login status will still be retained when you specify the <b>./user_data</b> folder again for the next design or task execution when you open <b>ebay.com</b>.</p>
                    <p style="text-align: justify">If there are multiple configurations, different directories can be set for each configuration. Each directory will be treated as a separate configuration set, and if a directory does not exist, it will be created automatically.</p>
                    <p><textarea class="form-control" style="min-height: 50px;"
                                 v-model="user_data_folder"></textarea>
                    </p>
                </div>
                <p><a @click="startDesign('en', true)"
                      class="btn btn-primary btn-lg"
                      style="margin-top: 15px; width: 300px;height:60px;padding-top:12px;color:white">Start Design</a></p>
                <p>
                <p><a @click="startDesign('en', true, true)"
                      class="btn btn-primary btn-lg"
                      style="margin-top: 15px; width: 300px;height:60px;padding-top:12px;color:white">Start Design (Mobile)</a></p>
                <p>
                    <a @click="step = 0" class="btn btn-outline-primary btn-lg"style="margin-top: 10px; width: 302px;height:45px;padding-top:5px">Go to Home Page</a>
                </p>
            </div>
        </div>
        <div v-else-if="lang=='zh'">
            <div v-if="step == -1">
                <h4 style="margin-top: 20px">版权声明和注意事项</h4>
                <p>请仔细阅读下方有关软件使用和商用付费的说明，同意请接受协议。</p>
                <textarea class="form-control" style="margin:0 auto;width:90%; color:black; height: 480px; min-height: 200px; background: white" readonly>
本软件仅供学习交流使用，严禁使用软件进行任何违法违规的操作，如爬取不允许爬取的政府/军事机关网站等。使用本软件所造成的一切后果由使用者自负，与作者本人无关，作者不会承担任何责任。同时，软件受到专利权保护，如要用于商业用途，如使用软件进行盈利接单，出售采集到的数据等，请联系杭州天勤知识产权代理有限公司（http://www.tqip.com/）进行专利授权等付费操作：https://www.patentguru.com/cn/search?q=一种自定义提取流程的服务封装系统

对于个人使用者来说，易采集EasySpider是一款完全免费无广告的开源软件，软件开发和维护全靠作者用爱发电，因此您可以选择支持作者让作者有更多的热情和精力维护此软件，或者您使用了此软件进行了盈利，欢迎您通过下面的方式支持作者：

1、支付宝账号：naibowang@foxmail.com，也可以扫描软件包中带的二维码。
2、微信收款：扫描软件包中带的二维码。
3、PayPal账号：naibowang，或扫描软件包中带的二维码。
                </textarea>
                <p><a @click="acceptAgreement" class="btn btn-primary btn-lg"
                      style="margin-top: 30px; width: 300px;height:60px;padding-top:12px;color:white">同意并开始使用</a></p>
            </div>
            <div v-if="step == 0">
                <p style="margin-top: 20px">提示：点击下方按钮开始使用。</p>

                <p><a @click="step = 1" class="btn btn-primary btn-lg"
                      style="margin-top: 15px; width: 300px;height:60px;padding-top:12px;color:white">设计/修改任务</a></p>

                <p><a @click="startInvoke('zh')"
                      @click class="btn btn-primary btn-lg"
                      style="margin-top: 15px; width: 300px;height:60px;padding-top:12px;color:white">查看/管理/执行任务</a>
                </p>
                <p>
                <a href="https://www.easyspider.cn?lang=zh" target="_blank" style="text-align: center; font-size: 18px">点此访问官网查看文档/视频教程</a>
                </p>
                <div class="img-container">
<!--                    <h5>出品方</h5>-->
                    <a href="https://www.zju.edu.cn" alt="浙江大学" target="_blank"><img src="img/zju.png"></a>
                    <a href="https://www.nus.edu.sg" alt= "新加坡国立大学" target="_blank"><img src="img/nuslogo.png"></a>
                    <a href="https://www.xidian.edu.cn" alt="西安电子科技大学" target="_blank"><img src="img/xidian.png"></a>
                </div>
            </div>
            <div v-else-if="step == 1">
                <h4 style="margin-top: 20px">请选择设计模式</h4>
                <p style="margin-top: 20px; text-align: left; width:320px; margin-left: 18%">
                    纯净版浏览器：无任何用户信息的浏览器。</p>
                <p style="text-align: left; width:320px; margin-left: 18%">
                    带用户信息的浏览器：保存有用户数据，如网站的登录信息，cookie的浏览器。</p>
                <p><a @click="startDesign('zh')"
                      class="btn btn-primary btn-lg"
                      style="margin-top: 15px; width: 320px;height:60px;padding-top:12px;color:white;">使用纯净版浏览器设计</a>
                </p>
                <p><a @click="startDesign('zh', false, true)"
                      class="btn btn-primary btn-lg"
                      style="margin-top: 15px; width: 320px;height:60px;padding-top:12px;color:white;">纯净版浏览器设计（手机模式）</a>
                </p>

                <p><a @click="step = 2" class="btn btn-primary btn-lg"
                      style="margin-top: 15px; width: 320px;height:60px;padding-top:12px;color:white">使用带用户信息浏览器设计</a>
                </p>
                <p>
                    <a @click="step = 0" class="btn btn-outline-primary btn-lg"style="margin-top: 10px; width: 322px;height:45px;padding-top:5px">返回首页</a>
                </p>


            </div>
            <div v-else-if="step == 2">
                <h4 style="margin-top: 20px">指定用户信息目录</h4>
                <div style="margin: 0 auto; width:90%">
                    <p style="margin-top: 20px; text-align: left">
                        请在下方指定用户信息目录。设置后，浏览器将加载目录里的cookie，如用户的登录信息等内容，目录不变的情况下，每次设计和执行时浏览器都会加载此目录里的数据。</p>
                    <p style="margin-top: 10px; text-align: left">例如：设置了./user_data文件夹，并在设计过程中登录了知乎网站，则下次再次设计或者执行任务时指定./user_data文件夹，打开知乎网站页面会仍然保留之前的登录状态。</p>
                    <p style="margin-top: 10px; text-align: left">如果有多套配置，可以设置不同的目录，每个目录为一套，如果目录不存在将会被自动创建。</p>
                    <p><textarea class="form-control" style="min-height: 50px;"
                                 v-model="user_data_folder"></textarea>
                    </p>
                </div>
                <p><a @click="startDesign('zh', true)"
                      class="btn btn-primary btn-lg"
                      style="margin-top: 15px; width: 320px;height:60px;padding-top:12px;color:white">开始设计</a></p>
                <p>
                <p><a @click="startDesign('zh', true, true)"
                      class="btn btn-primary btn-lg"
                      style="margin-top: 15px; width: 320px;height:60px;padding-top:12px;color:white">开始设计（手机模式）</a></p>
                <p>
                    <a @click="step = 0" class="btn btn-outline-primary btn-lg"style="margin-top: 10px; width: 322px;height:45px;padding-top:5px">返回首页</a>
                </p>
            </div>

        </div>
    </div>
</div>


<script type="module" src="index.js"></script>
</body>

</html>
